<template>
  <div>
    <div class="df">
      <div
        class="tiao"
        v-loading="signalsRadio1.xqshujuloading"
        element-loading-text="加载中..."
      >
        <p class="mt20 ml20">中标次数 (次)</p>
        <p class="mt20 ml20 size forBox">
          <span class="forSize">{{ signalsRadio1.zhongbaioTiTle }}</span>
        </p>
      </div>
      <div
        class="jia"
        v-loading="signalsRadio1.loading"
        element-loading-text="加载中..."
      >
        <p class="mt20 ml20">采购商数量 (家)</p>
        <p class="mt20 ml20 size forBox">
          <span class="forSize">{{
            signalsRadio1.zhongbiao_digital.cardinality_gy?.value
          }}</span>
        </p>
      </div>
      <div
        class="ci"
        v-loading="signalsRadio1.loading"
        element-loading-text="加载中..."
      >
        <p class="mt20 ml20">
          成交总金额 ({{
            moneydw(signalsRadio1.zhongbiao_digital.color_sum_price?.value)
          }})
        </p>
        <p class="mt20 ml20 size forBox">
          <span class="forSize">{{
            moneys(signalsRadio1.zhongbiao_digital.color_sum_price?.value)
          }}</span>
        </p>
      </div>
      <div
        class="ding"
        v-loading="signalsRadio1.xqshujuloading"
        element-loading-text="加载中..."
      >
        <p class="mt20 ml20">公告数量 (条)</p>
        <p class="mt20 ml20 size forBox">
          <span class="forSize">{{ signalsRadio1.zhongbaioTiTle }}</span>
        </p>
      </div>
    </div>

    <div class="phoneNum">
      <div class="phoneNum_top">
        <div style="display: flex">
          <span class="biao"></span>
          <span>中标联系人信息</span>
        </div>
        <div style="color: #f43107" @click="parentMethod">查看全部联系人</div>
      </div>
      <div class="phoneNum_box">
        <div
          class="photo_xbox"
          v-for="item in signalsRadio1.zhongbiao_Name?.slice(0, 6)"
          :key="item"
        >
          <div class="phoneNum_name">
            <img
              style="width: 14px; height: 14px"
              src="@/assets/newimg/rentou.png"
              alt=""
            />
            <!-- showFirstName(item.zblx) -->
            <span class="photo_size">{{
              item.top_score_hits.hits.hits[0]._source.zblx != ""
                ? item.top_score_hits.hits.hits[0]._source.zblx
                : "中标人"
            }}</span>
          </div>
          <div
            style="
              display: flex;
              justify-content: space-between;
              align-items: center;
            "
          >
            <img
              style="width: 14px; height: 14px"
              src="@/assets/newimg/phone.png"
              alt=""
            />
            <!-- .replace(/(\d{3})\d{4}(\d{4})/, "$1****$2") -->
            <span class="photo_size" style="flex: 1">{{ item.key }}</span>
            <!-- <span style="font-size: 12px; margin-right: 20px; color: #F43107">积分解锁</span> -->
          </div>
        </div>
      </div>
    </div>
    <div class="tender">
      <div class="phoneNum_top">
        <span class="biao"></span>
        <span>中标信息</span>
      </div>
      <div>
        <div>
          <!-- <span class="mr10">
            <el-input style="width: 220px" v-model="zhaobiao.offerings" clearable placeholder="请输入产品名称"
              @change="offeringsClick" />
          </span> -->
          <span class="mr10">
            <el-input
              style="width: 200px"
              v-model="zhaobiao.title"
              clearable
              placeholder="请输入关键字"
              @change="boosClick"
            />
          </span>
          <span class="mr10">
            <el-cascader
              v-model="proPtions"
              placeholder="请选择项目地区"
              :options="options"
              :props="props"
              collapse-tags-tooltip
              collapse-tags
              clearable
              @change="recognize6"
            />
          </span>
          <!-- <span class="mr10">
            <el-select v-model="zhaobiao.bulletin" class="m-2" multiple collapse-tags clearable placeholder="全部公告类型"
              style="width: 200px" @change="announcement">
              <el-option v-for="item in gGoptions" :key="item.infoid" :label="item.infoname" :value="item.infoid" />
            </el-select>
          </span>
          <span class="mr10">
            <el-select v-model="zhaobiao.bidding" class="m-2" multiple collapse-tags clearable placeholder="全部招标方式"
              style="width: 240px" @change="announcement1">
              <el-option v-for="item in gGzhaobfabgs" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </span> -->
          <span class="mr10">
            <el-cascader
              v-model="bulletinLis"
              placeholder="请选择公告类型"
              :options="opbulletin"
              :props="propssss"
              collapse-tags
              collapse-tags-tooltip
              clearable
              @change="zhongbiaoment"
            />
          </span>
          <span class="mr10">
            <el-date-picker
              style="width: 220px"
              v-model="time"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
              format="YYYY/MM/DD"
              value-format="x"
              @change="timeClick"
            />
          </span>

          <!-- <span>
            <el-select class="m-2" v-model="Boos" multiple collapse-tags clearable placeholder="全部招标公司类型"
              style="width: 200px" @change="announcement2">
              <el-option v-for="item in gGoleixing" :key="item.id" :label="item.name" :value="item.id" />
            </el-select>
          </span> -->
        </div>
      </div>
    </div>

    <el-table
      :data="signalsRadio1.zhongbiao_liss"
      style="width: 100%"
      :header-cell-style="{ backgroundColor: '#FCE2E2', color: '#333' }"
    >
      <el-table-column label="公告类型" align="center">
        <template #default="{ row }">
          <span
            style="
              display: inline-block;
              height: 24px;
              font-size: 14px;
              padding: 0 10px;
              background-color: #f43107;
              color: #ffffff;
              border-radius: 4px;
            "
            >{{ informations(row.infoid) }}</span
          >
        </template>
      </el-table-column>
      <el-table-column prop="name" label="公告标题" width="220" align="center">
        <template #default="{ row }">
          <span @click="boosBx(row.nid)"> {{ row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="state" label="招标方式" align="center">
        <template #default="{ row }">
          {{ row.tags[0] }}
        </template>
      </el-table-column>

      <el-table-column label="产品" align="center">
        <template #default="{ row }">
          <div style="display: flex; justify-content: center">
            <span
            class="yincang"
            style="margin-right: 15px"
              v-if="row.products != null"
              v-for="i in row.products.slice(0, 1)"
              :key="i.doc_count"
              >{{ i.names[0] }}</span
            >
            <div
              v-if="row.products != null && row.products.length > 1"
              class="more"
              @click="moreGd(row.products)"
            >
              更多
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="招标公司" width="200" align="center">
        <template #default="{ row }">
          <span @click="boosXq(row.zbdw)"> {{ row.xmdw }}</span>
        </template>
      </el-table-column>
      <el-table-column label="项目地区" align="center">
        <template #default="{ row }">
          <span style="color: #707070">
            {{ diqu(row.provinceid) }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="金额" align="center">
        <template #default="{ row }">
          <div
            v-if="row.jg > '0'"
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fe8d03;
            "
          >
            <img
              style="width: 14px; margin-right: 5px"
              src="@/assets/img/money.png"
              alt=""
            />
            {{ money(row.jg) }}
          </div>
          <div
            v-if="row.jg == '0'"
            style="
              display: flex;
              align-items: center;
              justify-content: center;
              color: #fe8d03;
            "
          >
            <img
              style="width: 14px; margin-right: 5px"
              src="@/assets/img/money.png"
              alt=""
            />
            {{ "见详情" }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="发布时间" align="center">
        <template #default="{ row }">
          <span style="color: #707070">
            {{ timestamp(row.release_time) }}
          </span>
        </template>
      </el-table-column>
    </el-table>

    <Pagination />
  </div>
  <el-dialog
    v-model="dialogVisible"
    title="产品列表"
    width="30%"
    :before-close="handleClose"
  >
    <div class="infordisplay">
      <span class="cate_label" v-for="item in boxes">{{ item.names[0] }}</span>
    </div>
  </el-dialog>
</template>

<script setup>
import domData from "@/utils/json/dom.json";
import "@/assets/com/com.scss";
import { reactive, ref, onMounted } from "vue";
import { showFirstName } from "@/utils/index";
import Pagination from "../pagin/index.vue";
import { useRadio1Store } from "@/pain/search/search";
import { getCaricatureApi, getInfomationchild } from "@/Api/shoop/index.js";
import { timestamp, diqu, money, moneys, moneydw } from "@/utils/index";
import { useRouter } from "vue-router";
const router = useRouter();
const signalsRadio1 = useRadio1Store();
const dialogVisible = ref(false);
let time = ref();
let Boos = ref([]);
let zhaobiao = reactive({
  title: "",
  boosName: "",
  leave: [],
  market: [],
  quarter: [],
  bulletin: [],
  // bidding: [],
  time: [
    {
      oneTime: "",
      twoTime: "",
    },
  ],
  Boos: [],
});
defineProps({
  parentMethod: {
    type: Function,
  },
});
const props = { multiple: true, checkStrictly: true };
const propssss = { multiple: true };
signalsRadio1.winatender = zhaobiao;
let options = [];
let proPtions = ref([]);
let children2 = ref([]);
let children3 = ref([]);
let diquArr = ref([]);
domData.forEach((aaa) => {
  diquArr.value.push(aaa);
});
options = domData.filter((item) => item.parent === 100000);
domData.forEach((item) => {
  Reflect.set(item, "value", item.label);
});
options.forEach((element) => {
  children2 = domData.filter((word) => element.adcode == word.parent);
  Reflect.set(element, "children", children2);
  // children2.forEach((ele) => {
  //   children3 = domData.filter((word) => ele.adcode == word.parent);
  //   Reflect.set(ele, "children", children3);
  // });
});
let state = reactive({
  newList: [],
  newArr: [],
  optionsArr: [],
  children2Arr: [],
  children3Arr: [],
});
const recognize6 = () => {
  console.log("valie", proPtions.value);
  proPtions.value.forEach((i) => {
    i.forEach((l) => {
      state.newList.push(l);
    });
  });

  diquArr.value.forEach((j) => {
    state.newList.filter((words) => {
      if (j.label == words) {
        state.newArr.push(j);
      }
    });
  });

  state.newArr = Array.from(new Set(state.newArr));
  options.forEach((j1) => {
    state.newArr.filter((words) => {
      if (j1.adcode == words.adcode) {
        state.optionsArr.push({
          id: j1.adcode,
          name: j1.label,
        });
      }
      return;
    });
  });
  options.forEach((element) => {
    children2 = domData.filter((word) => element.adcode == word.parent);
    children2.forEach((ele) => {
      state.newArr.filter((words1) => {
        if (ele.adcode == words1.adcode) {
          state.children2Arr.push({
            id: ele.adcode,
            name: ele.label,
          });
        }
      });
      children3 = domData.filter((word) => ele.adcode == word.parent);
      children3.forEach((lll) => {
        state.newArr.filter((words2) => {
          if (lll.adcode == words2.adcode) {
            state.children3Arr.push({
              id: lll.adcode,
              name: lll.label,
            });
          }
        });
      });
    });
  });
  zhaobiao.leave = Array.from(new Set(state.optionsArr));
  zhaobiao.market = Array.from(new Set(state.children2Arr));
  zhaobiao.quarter = Array.from(new Set(state.children3Arr));
  signalsRadio1.getcompany_detail_zbs();
};

// 全部公告类型
let gGoptions = ref([]);
const getInformation = () => {
  getCaricatureApi().then((res) => {
    let {
      data: { data },
    } = res;
    gGoptions.value = data;
  });
};
getInformation();
let informations = (id) => {
  let infor = gGoptions.value.filter((res) => res.infoid == id);
  return infor[0]?.infoname;
};

// 选择公告类型
let opbulletin = ref([]);
const getInfomationchilds = () => {
  getInfomationchild().then((res) => {
    opbulletin.value = res.data.data;
  });
};
getInfomationchilds();

let bulletinLis = ref([]);
const zhongbiaoment = () => {
  zhaobiao.bulletin = [];
  bulletinLis.value.forEach((res) => {
    zhaobiao.bulletin.push(res[1]);
  });
  signalsRadio1.getcompany_detail_zbs();
};
// const announcement1 = () => {
//   signalsRadio1.getcompany_detail_zbs();
// };
// const announcement2 = (data) => {
//   data.forEach(res => {
//     zhaobiao.Boos = gGoleixing.filter(dae => dae.id == res)
//   })
//   signalsRadio1.getcompany_detail_zbs();
// };

// const offeringsClick = () => {
//   signalsRadio1.getcompany_detail_zbs();
// };

const boosClick = () => {
  signalsRadio1.getcompany_detail_zbs();
};
// 全部招标方式
// let gGzhaobfabgs = ref([
//   {
//     id: "1",
//     name: "公开招标",
//   },
//   {
//     id: "2",
//     name: "询比价",
//   },
//   {
//     id: "3",
//     name: "竞价",
//   },
//   {
//     id: "4",
//     name: "竞争性磋商",
//   },
//   {
//     id: "5",
//     name: "竞争性谈判",
//   },
//   {
//     id: "6",
//     name: "邀请招标",
//   },
//   {
//     id: "7",
//     name: "单一来源",
//   },
//   {
//     id: "8",
//     name: "网上直购",
//   },
//   {
//     id: "9",
//     name: "定单采购",
//   },
//   {
//     id: "10",
//     name: "公开寻源",
//   },
// ]);
// 全部招标公司类型
// let gGoleixing = [
//   {
//     id: "1",
//     name: "国有企业",
//   },
//   {
//     id: "2",
//     name: "通讯运营商",
//   },
//   {
//     id: "3",
//     name: "军队",
//   },
//   {
//     id: "4",
//     name: "银行",
//   },
//   {
//     id: "5",
//     name: "证券",
//   },
//   {
//     id: "6",
//     name: "保险",
//   },
//   {
//     id: "7",
//     name: "民营企业",
//   },
//   {
//     id: "8",
//     name: "医院",
//   },
//   {
//     id: "9",
//     name: "政府及事业单位",
//   },
//   {
//     id: "10",
//     name: "学校",
//   },
//   {
//     id: "11",
//     name: "其他",
//   },
// ];
// 时间
const timeClick = (value) => {
  console.log(value);
  if (value == null) {
    signalsRadio1.getcompany_detail_zbs();
    return;
  }
  const dateObject1 = new Date(value[0]);
  let seconds1 = Math.floor(dateObject1.getTime() / 1000);
  const dateObject2 = new Date(value[1]);
  let seconds2 = Math.floor(dateObject2.getTime() / 1000);
  zhaobiao.time[0] = {
    oneTime: seconds1,
    twoTime: seconds2,
  };
  signalsRadio1.getcompany_detail_zbs();
};
// 表格
let tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Home",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Office",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Home",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    state: "California",
    city: "Los Angeles",
    address: "No. 189, Grove St, Los Angeles",
    zip: "CA 90036",
    tag: "Office",
  },
];
const boosBx = (id) => {
  const href = router.resolve({
    path: `/searchInfo/${id}`,
  });
  window.open(href.href, "_blank");
};

const boosXq = (data) => {
  const href = router.resolve({
    path: "/disposition",
    query: {
      id: 8,
      name: data.replace(/<[^>]+>/g, ""),
    },
  });
  window.open(href.href, "_blank");
};

const handleClose = (done) => {
  done();
};
let boxes = ref([]);
const moreGd = (gd) => {
  dialogVisible.value = true;
  boxes.value = gd;
};

// signalsRadio1.getcompany_detail_zbs();
onMounted(() => {});
</script>

<style lang="scss" scoped>

.yincang {
  width: 56px;
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}
.infordisplay {
  display: flex;
  flex-wrap: wrap;
  // max-height: 400px;
  overflow: auto;
  padding: 16px 24px;

  .cate_label {
    margin-right: 10px;
    margin-bottom: 8px;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 14px;
    background: rgba(0, 143, 147, 0.1);
    color: #6675ff;
  }
}

.el-input {
  border: 1px solid #dcdfe5;
  color: #c7cbd3;
}

.mr10 {
  margin-right: 10px;
}

.forBox {
  font-size: 22px;
  font-family: Source Han Sans CN;
  font-weight: bold;
}

.forSize {
  margin-right: 5px;
  font-size: 42px;
  font-family: Source Han Sans CN;
  font-weight: bold;
}

.tiao {
  width: 13.75rem;
  height: 120px;
  background: url(@/assets/img/xq1.png) no-repeat;
  background-size: 100% 100%;
  color: #ffffff;
}

.jia {
  margin-left: 20px;
  background: url(@/assets/img/xq2.png) no-repeat;
  background-size: 100% 100%;
  width: 13.75rem;
  color: #ffffff;
  height: 120px;
}

.ci {
  margin-left: 20px;
  background: url(@/assets/img/xq3.png) no-repeat;
  background-size: 100% 100%;
  width: 13.75rem;
  color: #ffffff;
  height: 120px;
}

.ding {
  margin-left: 20px;
  background: url(@/assets/img/xq4.png) no-repeat;
  background-size: 100% 100%;
  width: 13.75rem;
  color: #ffffff;
  height: 120px;
}

.phoneNum {
  padding-top: 20px;

  .phoneNum_top {
    display: flex;

    justify-content: space-between;

    .biao {
      width: 4px;
      height: 16px;
      margin-right: 10px;
      background-color: #f43107;
      border-radius: 10px;
    }
  }

  .phoneNum_box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding-bottom: 5px;

    .photo_xbox {
      width: 170px;
      height: 80px;
      margin-right: 15px;
      margin-top: 20px;
      padding: 20px 0 0 20px;
      background-color: #ffffff;
      box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.16);
      border-radius: 8px;

      &:nth-child(6) {
        margin-right: 0;
      }

      .phoneNum_name {
        margin-bottom: 15px;
      }

      .photo_size {
        margin-left: 10px;
        font-size: 12px;
        font-family: Source Han Sans CN;
        font-weight: 400;
        color: #333;
      }
    }
  }
}

.tender {
  margin: 30px 0;
  padding-bottom: 20px;
  border-bottom: 1px solid #dddddd;

  .phoneNum_top {
    display: flex;
    margin-bottom: 20px;
  }
}

.biao {
  width: 4px;
  height: 16px;
  margin-right: 10px;
  background-color: #f43107;
  border-radius: 10px;
}
</style>
